import React, { Component } from 'react'

export default class ToDoList extends Component {

    state = {
        list: JSON.parse(localStorage.getItem('todoList')) || [],
        username: '',
        pwd: '',
        email: ''
    };

    addItem = (e) => {
        //setState是异步的：体现在存储时存上一个==>所以改成现在的每次都是arr保存当前所有的（除去一步）
        if (e.keyCode == 13) {
            let arr = [{ title: e.target.value, time: Date.now() }, ...this.state.list]
            this.setState({
                list: arr
            }, () => {

                localStorage.setItem('todoList', JSON.stringify(arr));
                // localStorage.setItem('todoList',JSON.stringify(this.state.list));

                console.log(this.state.list);
            })
        }
    }
    delVal = (i) => {
        console.log(i);

        //list地址未变，状态对比比较地址，有问题
        // this.state.list.splice(index,1);
        // this.setState({
        //     list:this.state.list
        // })
        // filter为真留下,创建新数组
        let newList = this.state.list.filter((item, index) => i != index)
        this.setState({ list: newList })
        localStorage.setItem('todoList', JSON.stringify(newList))
    }
    del = (i) => {

        return () => { console.log(i) }
    }
    saveData = (type) => {
        return (e) => {
            this.setState({
                [type]: e.target.value//状态更新：状态合并==>用新的对象替换
            })
        }
    }

    render() {
        const { list, username, pwd, email } = this.state;

        return (
            <div>
                <label htmlFor="username">用户名</label>
                <input id="username" type="text"/>
                <br/>
                {'<h1>ggg</h1>'}
                <br/>

                <input name="username" value={username} onChange={this.saveData('username')} />
                <br/>
                <input name="pwd" value={pwd} onChange={this.saveData('pwd')} />
                <br/>
                <input name="email" value={email} onChange={this.saveData('email')} />
                <br/>
                <input onKeyUp={this.addItem} />
                <h2>{list.length}</h2>
                <ul>
                    {list.map((val, index) => <li key={val.time}>
                        <input type="checkbox" />
                        {val.title}
                        ---{val.time}
                        {/* onclick需要传参就一定要有箭头函数绑定事件处理函数 */}
                        {/* map返回全新数组 */}
                        <button onClick={() => this.delVal(index)}>delete</button>
                        {/* 如果要绑定函数，在绑定函数中，返回一个函数 */}
                        <button onClick={this.del(index)}>delete-2</button>

                    </li>)}
                </ul>
            </div>
        )
    }
}
//高阶函数：接受一个函数作为参数或者将一个函数作为输出返回的函数
// map filter del curryAdd
// //箭头函数



// // 函数柯里化：就是将一个接受多个参数的函数，变换成只接收一个参数，
// // 并且反回接收其余参数（且进行结果计算）的函数的一种方式
// const add=(a,b,c)=>{
//     return a+b+c;
// }
// const curryAdd = (a)=>{
//     return (b)=>{
//         return (c)=>{
//             return a+b+c;
//         }
//     }
// }
// const curry = a=>b=>c=>a+b+c;
// console.log(add(1,2,3))
// console.log(curryAdd(1,2,3))//6  b=>{return(c)=>{return a+b+c}}
// console.log(curryAdd(1)(2)(3))//6 b=>{}
// console.log(curry(1)(2)(3))//6 b=>{}


let obj = {name:"liu"}
console.log(obj.name);
console.log(obj["name"]);
let a ="name";
console.log(a)

